<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>创建活动</title>
  <link rel="stylesheet" href="<%= request.getContextPath() %>/static/layui.css">
  <script src="<%= request.getContextPath() %>/static/layui.js"></script>
</head>
<body>
<div class="layui-container" style="margin-top: 20px;">
  <h2>创建活动</h2>
  <form class="layui-form" action="<%= request.getContextPath() %>/organizer/createEvent" method="post">
    <!-- 活动名称 -->
    <div class="layui-form-item">
      <label class="layui-form-label">活动名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入活动名称" class="layui-input">
      </div>
    </div>
    <!-- 活动描述 -->
    <div class="layui-form-item">
      <label class="layui-form-label">活动描述</label>
      <div class="layui-input-block">
        <textarea name="description" placeholder="请输入活动描述" class="layui-textarea"></textarea>
      </div>
    </div>
    <!-- 开始时间 -->
    <div class="layui-form-item">
      <label class="layui-form-label">开始时间</label>
      <div class="layui-input-block">
        <input type="datetime-local" name="start_time" required lay-verify="required" class="layui-input">
      </div>
    </div>
    <!-- 结束时间 -->
    <div class="layui-form-item">
      <label class="layui-form-label">结束时间</label>
      <div class="layui-input-block">
        <input type="datetime-local" name="end_time" required lay-verify="required" class="layui-input">
      </div>
    </div>
    <!-- 活动地点 -->
    <div class="layui-form-item">
      <label class="layui-form-label">活动地点</label>
      <div class="layui-input-block">
        <input type="text" name="location" required lay-verify="required" placeholder="请输入活动地点" class="layui-input">
      </div>
    </div>
    <!-- 活动最大人数 -->
    <div class="layui-form-item">
      <label class="layui-form-label">最大人数</label>
      <div class="layui-input-block">
        <input type="number" name="capacity" required lay-verify="required|number" placeholder="请输入最大报名人数" class="layui-input">
      </div>
    </div>
    <!-- 提交按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>
<script>
  // 使用 layui 表单验证
  layui.use(['form'], function () {
    var form = layui.form;

    // 自定义验证规则
    form.verify({
      number: [/^\d+$/, '请输入有效的数字']
    });
  });
</script>
</body>
</html>
